<template>
  <div>
    <div class="indextop">
      <div class="tbox clearfix">
        <div class="indexlogo">数据服务系统</div>
        <div class="nav">
          <div class="search">
            <Search id="header-search"></Search>
          </div>
          <div class="navbox name">{{hoursTip}}{{name}}</div>
          <router-link to="/user/profile" class="navbox fk">个人中心</router-link>
          <div class="navbox logout" @click="logout">退出</div>
        </div>
      </div>
    </div>

    <div class="carouselbox">
      <div class="carousel">
        <el-carousel :interval="5000" arrow="never">
          <el-carousel-item v-for="(item,index) in carouselList" :key="index">
            <div class="carouselimg" :style="{'backgroundImage': 'url(' + item.img + ')'}">
              <div :class="item.index%2==0?'carouselcon l':'carouselcon'">
                <h2>{{item.name}}</h2>
                <div class="p" v-html="item.info"></div>
                <div class="more" @click="gopage(item.path)">了解更多</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="menuconbox">
      <div :class="allmenu[0].length<5?'menubox flex clearfix':'menubox clearfix'" v-for="(element,j) in allmenu" :key="'all'+j">
         <div v-if="userpermission">
          <p class="permisstitle">您尚未分配系统业务功能操作权限，请联系管理员</p>
        </div>
        <div class="menu" v-for="(item,index) in element" :key="'route'+index">
          <div :class="'icon '+item.meta.icon"></div>
          <h2 class="fx">{{item.meta.title}}</h2>
          <div v-if="item.children">
          <p v-for="(ele,i) in item.children.slice(0,3)" :key="'c'+i">
            <a @click="goWeb(ele,item.path)" v-if="!ele.hidden">{{ele.meta.title| ellipsis}}</a>
          </p>
          <p class="more" v-if="item.children.length>3" @click="showAll(j,index)"><span>More ></span></p>
          </div>
          <div class="mask" v-show="activeIndex=='i'+index+'j'+j" @click="closeAll"></div>
          <div class="allmenu" v-show="activeIndex=='i'+index+'j'+j">
            <div class="title">{{item.meta.title}}</div>
            <div class="con clearfix">
              <p v-for="(ele,i) in item.children" :key="'c'+i" v-show="!ele.hidden">
                <a @click="goWeb(ele,item.path)" v-if="!ele.hidden">{{ele.meta.title}}</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="insfoot">
      <div class="foot clearfix">
        <div class="fr"><span>© 网站使用条款</span></div>
      </div>
    </div>



  </div>
</template>

<script>
import backImg from "@/assets/image/banner1.jpg";
import backImg2 from "@/assets/image/banner2.jpg";
import backImg3 from "@/assets/image/banner3.jpg";
import backImg4 from "@/assets/image/banner4.jpg";
import backImg5 from "@/assets/image/banner5.jpg";
import Search from '@/components/HeaderSearch'
import { mapGetters, mapState } from "vuex";
const clickoutside = {
    bind(el, binding, vnode) {
        function documentHandler(e) {
            if (el.contains(e.target)) {
                return false;
            }
            if (binding.expression) {
                binding.value(e);
            }
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    },
};
export default {
  name: 'Index',
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0,10) + '...'
      }
      return value
    }
  },
  components: {
    Search
  },
  computed:{
    ...mapGetters(["name",'permission_routes', 'roles', 'introduction', 'token', 'readed', 'dept']),
  },
  data() {
    return {
      allmenu:[],
      menulist:[],
      hoursTip:"",
      activeIndex: -1,
      carouselList:[{index:1,name:"在线查询",info:"<p style='margin:0;'>自助式分析工具，提供“勾选式”的细粒度汇总数据灵活查询，</p><p style='margin:0;'>可定制模板并选择通过邮件、U聊等方式高效率获取数据</p>",img:backImg,path:'/onlineQuery/search/1'},{index:2,name:"多维分析",info:"<p style='margin:0;letter-spacing:2px'>智能BI工具，分析人员可通过“拖拉拽”方式进行</p><p style='margin:0;'>自助式汇总数据分析，可针对单个或多个商户进行</p><p style='margin:0;'>交易统计分析，数据可细到区县</p>",img:backImg5,path:process.env.VUE_APP_BASE_DWFXURL},{index:3,name:"数据厨房",info:"<p style='margin:0;letter-spacing:2px'>一站式开发平台，全自动化运维监控，提供传统与主要</p><p style='margin:0;'>创新业务的属地数据，具有基本编程能力的数据分析人员</p><p style='margin:0;'>可进行个性化、高效率的数据分析加工</p>",img:backImg3,path:process.env.VUE_APP_BASE_SJCFURL },{index:4,name:"考核分析",info:"<p style='margin:0;'>可视化大屏展示，提供财务效益、用户规模、受理拓展、</p><p style='margin:0;'>场景考核等指标，辅助跟踪经营情况</p>",img:backImg4,path:process.env.VUE_APP_BASE_KHFXURL}],
      readOpen:false,
      readChecked:false,
      readList:[],
      readId:undefined,
      readTitle:undefined,
      readContent:undefined,
      userpermission:false
      }
  },
  directives: {clickoutside},
  methods: {
    getRouter(){
      this.menulist = []
      console.info(this.permission_routes);
      this.permission_routes.forEach(element => {
        if(!element.hidden){
          element.show = false
          this.menulist.push(element)
        }
      });
      
      this.permission_routes.forEach(res => {
        if (res.path === "/onlineQuery") {
          if (res.children.length) {
            if (res.children[0].children && res.children[0].children.length) {
              this.carouselList[0].path = '/onlineQuery/' + res.children[0].path + '/' + res.children[0].children[0].path
            } else {
              this.carouselList[0].path = '/onlineQuery/' + res.children[0].path
            }
          }
        }
      })
      
      this.menulist.forEach(element => {
        if(element.children){
          for (let a = 0; a < element.children.length; a++) { 
            if (element.children[a].hidden) {
              element.children.splice(a,1)
              a -= 1
            }
          }
        }
      });
      let size = 5;
      this.allmenu= [];
       if(this.menulist !==undefined && this.menulist.length > 0){
      for(let i=0;i<this.menulist.length;i+=size){
        this.allmenu.push(this.menulist.slice(i,i+size));
      }
      }else if(this.menulist == undefined || this.menulist.length <= 0){
        this.userpermission=true
      }
    },
    getMycount:function(){
　　　　let self=this;
　　　　let date=new Date();
　　　　if(date.getHours()>=0&&date.getHours()<12){
　　　　　　self.hoursTip="上午好！"
　　　　}else if(date.getHours()>=12&&date.getHours()<18){
　　　　　　self.hoursTip="下午好！"
　　　　}else{
　　　　　　self.hoursTip="晚上好！"
　　　　}
　　},
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    },
    showAll(j,i){
      this.activeIndex = 'i'+i+'j'+j
    },
    closeAll(e){
      this.activeIndex = ''
    },
    gopage(path){
      if(path.indexOf('http')>-1){
        httpLog(this.unescapeHTML(path))
        window.open(path, '_blank')
      }else{
        this.$router.push({ path: path });
      }
    },
    unescapeHTML: function(a){
        a = "" + a;
        return a.replace(/</g, "<").replace(/>/g, ">").replace(/&amp;/g, "&").replace(/"/g, '"').replace(/'/g, "'");
    },
    goWeb(ele, path){
      if(ele.path.indexOf('http')>-1){
        if(ele.path=='http://yxfzjcxt'){
          goWebSystem().then(response => {
            if(response.code==200){
              let purl = this.unescapeHTML(response.msg)
              httpLog(decodeURIComponent(purl))
              window.open(decodeURIComponent(purl), '_blank')
            }
          }).catch(function(error){});
        }else{
          let purl = this.unescapeHTML(ele.path)
          httpLog(purl)
          window.open(purl, '_blank')
        }
      }else{
        let url = path
        if(ele.children){
          url += '/' + ele.path
          url = this.getFirstChild(ele.children, url)
        }else{
          url += '/' + ele.path
        }
        this.$router.push({ path: url });
      }
    },
    getFirstChild(val,path) {
      let url = path
        if (val[0].children && val[0].children.length>0) {
            url += '/' + val[0].path
            this.getFirstChild(val[0].children,url);
        } else {
            url += '/' + val[0].path
            return url
        }
    },
  },
  created(){
    /*listInfoUrl().then(response => {
      let urldata =  response.data;
      for(var i =0;i<urldata.length;i++){
        this.carouselList[i].path = urldata[i].replace(new RegExp('&amp;','g'),"&");
      }
    });*/
    this.getRouter()
    this.getMycount()
  }
}
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/newindex.scss";
  .readbox{line-height: 30px; font-size: 14px;}
  .readbox h2{ padding:0; margin:0; line-height: 30px; font-size: 18px; font-weight: bold;}
  .readbox .con{ margin-top:10px; line-height: 30px; font-size: 14px; text-align: left;}
  .readbox .con p{padding-bottom:5px;}
  .readche{margin-top: 10px;}
  .read >>> .el-dialog__body{ padding-top:10px;}
  .read >>> .el-dialog__body .readbox  p{text-indent: 2em;margin-top: 6px;margin-bottom: 6px}
  .permisstitle{font-size: 30px;width: 100%;text-align: center;font-weight: bold;}
</style>
